<template>
  <div class="shareList">
    <!-- 导航栏 -->
    <hmnavbar title="面经分享" path="/find" />
    <!-- 搜索框 -->
    <div class="search">
      <!-- 被点击跳转到搜索页面 -->
      <div class="content" @click="$router.push('/search')">
        <i class="iconfont iconicon_search"></i>
        请输入关键字
      </div>
    </div>
    <!-- 面经列表 -->
    <div class="shareList">
      <!-- 为列表添加下拉更多效果 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <share
          :item="item"
          v-for="(item, index) in shareList"
          :key="index"
        ></share>
      </van-list>
    </div>
  </div>
</template>
<script>
import Share from '../find/share.vue'
import { getShareApi } from '../../../api/find.js'
export default {
  name: 'sharelist',
  components: { Share },
  data () {
    return {
      loading: false /* 加载状态,false加载完成,true加载中 */,
      finished: false /* 是否加载完成,完成后不触发load事件 */,
      shareList: [] /* 渲染的到页面的数据 */,
      start: 0 /* 从第几条开始获取 */,
      limit: 5 /* 每次获取几条 */,
      total: 0 /* 记录一共有多少条数据 */
    }
  },
  methods: {
    // 加载事件,加载时要做的操作
    async onLoad () {
      // 获取面经数据(默认获取五条,从第0条开始获取)
      const res = await getShareApi({
        start: this.start,
        limit: this.limit
      })
      if (res.code === 200) {
        // 这里要用push而不是赋值的原因,每次加载后拼接获取的数据,而不是直接覆盖之前的数据
        this.shareList.push(...res.data.list)
        this.loading = false
        this.total = res.data.total
        if (this.shareList.length >= this.total) {
          this.finished = true
        }
      }
      this.start += this.limit
    }
  }
}
</script>
<style lang="less" scoped>
.shareList {
  .search {
    padding: 0 15px;
    .content {
      height: 34px;
      background-color: #f7f4f5;
      border-radius: 17px;
      text-align: center;
      font-size: 14px;
      color: #b3b3b3;
      line-height: 34px;
      .iconfont {
        font-size: 22px;
        vertical-align: middle;
      }
    }
  }
}
</style>
